<template>
<div class="create_shadow_cp">
    <div class="top box-shadow_2">
        <div class="top"
            :style="{
                backgroundColor:shadow_data.background_outside,
            }">
            <div class="color_picker">
                <ColorPicker
                    v-model="shadow_data.background_outside">
                </ColorPicker>
            </div>
            <div class="container"
                :style="{
                    backgroundColor:shadow_data.background,
                    boxShadow:get_shadow,
                }">
                <div class="copy">
                    <Copy
                        title="CSS"
                        :content="shadow_data.shadow">
                    </Copy>
                </div>
                <div class="color_picker">
                    <ColorPicker
                        v-model="shadow_data.background">
                    </ColorPicker>
                </div>
            </div>
        </div>
        <div class="shadow_css">
            <el-input v-model="shadow_data.shadow" placeholder="请输入CSS" clearable type="textarea"></el-input>
        </div>
        <div class="title" v-if="shadow_data.name">
            {{shadow_data.name}}
        </div>
        <div class="colors">
            <ColorList
                :colors_data="shadow_data.background_outside + ' ' + shadow_data.shadow +' '+ shadow_data.background +' '">
            </ColorList>
        </div>
        <div class="tags">
            <div v-for="(item,index) in get_tags" :key="index">
                #{{item}}
            </div>
        </div>
        <div class="bottom">
            <el-popover
                placement="top"
                width="300"
                v-model="show">
                <el-form label-position="top" label-width="80px" :model="shadow_data">
                    <el-form-item label="名称">
                        <el-input v-model="shadow_data.name"></el-input>
                    </el-form-item>
                    <el-form-item label="标签(用'|'号隔开)">
                        <el-input v-model="shadow_data.tags"></el-input>
                    </el-form-item>
                    <el-form-item label="配色介绍">
                        <el-input type="textarea" v-model="shadow_data.content"></el-input>
                    </el-form-item>
                </el-form>
                
                <div class="add" slot="reference">
                    <Add_other_bt></Add_other_bt>
                </div>
            </el-popover>
        </div>
    </div>
    <div class="bottom" @click="on_submit">
        <Submit_bt></Submit_bt>
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>
</template>

<script>
import Loading from '@/components/other/Loading';
import ColorList from '@/components/other/ColorList';
import Copy from '@/components/other/Copy';
import ColorPicker from '@/components/other/ColorPicker';
export default {
    name: 'CreateShadow',
    components: {
        Loading,
        ColorList,
        ColorPicker,
        Copy,
    },
    data(){
        return{
            show:false,
            loading:false,
            shadow_data:{
                shadow:'box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;',
                background:'#db3b61',
                background_outside:'#ffffff',
                colors:'',
                name:null,
                content:null,
                tags:null,
                data_type:3,
            },
        };
    },
    computed:{
        get_shadow(){
            return this.shadow_data.shadow.replace('box-shadow:','').replace(';','');
        },
        get_tags(){
            if(this.shadow_data.tags){
                return this.shadow_data.tags.split('|');
            }else{
                return [];
            }
        },
    },
    methods:{
        on_submit(){
            let old_length = this.$store.state.my_create.shadow.length;
            this.$store.commit('add_my_create',{
                shadow:this.shadow_data,
            });
            let new_length = this.$store.state.my_create.shadow.length;
            if(old_length !== new_length && !this.loading){ //表示数据已经添加到本地了,可以提交
                this.loading = true;
                this.$axios.my_post('/add_upload',{
                    ...this.shadow_data,
                }).catch(({msg}) =>{
                    return;
                }).finally(()=>{
                    this.loading = false;
                    //跳转到我的页面
                    this.$router.push({
                        path: '/mine',
                        query: {
                            type:'shadow',
                        }
                    }).catch(()=>{return;});
                });
            }else{
                this.$message('已经添加过该配色了！');
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.create_shadow_cp{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    >.top{
        border: none;
        background-color: white;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        max-width: 400px;
        width: 100%;
        >.top{
            width: 100%;
            border: none;
            background-color: white;
            box-sizing: border-box;
            border-radius: 5px;
            text-align: left;
            position: relative;
            padding: 20px;
            border: 1px solid rgb(228, 236, 238);
            box-sizing: border-box;
            .color_picker{
                width: fit-content;
                position: absolute;
                top: 5px;
                right: 5px;
                opacity: 0;
                transition: all 0.2s;
            }
            &:hover{
                >.copy{
                    opacity: 1;
                }
                >.color_picker{
                    opacity: 1;
                }
            }
            >.container{
                border-radius: 5px;
                overflow: hidden;
                position: relative;
                //background-color: aliceblue;
                height: 100px;
                width: 100px;
                margin: 0px auto;
                padding: 20px;
                >.copy{
                    width: fit-content;
                    position: absolute;
                    bottom: 5px;
                    left: 5px;
                    opacity: 0;
                    transition: all 0.2s;
                    /deep/.Copy{
                        border-radius: 3px;
                        font-size: 1.4rem;
                    }
                }
                &:hover{
                    >.copy{
                        opacity: 1;
                    }
                    >.color_picker{
                        opacity: 1;
                    }
                }
            }
        }
        >.shadow_css{
            width: 100%;
            margin-top: 15px;
        }
        >.title{
            font-size: 1.2rem;
            line-height: 1.2rem;
            font-weight: bold;
            margin-top: 15px;
        }
        >.colors{
            /deep/.ColorList{
                div{
                    margin: 0 7.5px;
                    margin-top: 15px;
                }
            }
        }
        >.tags{
            display: flex;
            justify-content:center;
            align-items: center;
            flex-wrap:wrap;
            >div{
                font-size: 1.1rem;
                line-height: 1.1rem;
                color: #899bb4;
                margin: 0 7.5px;
                margin-top: 15px;
                // cursor: pointer;
                // transition: all 0.2s;
                // &:hover{
                //     color: #535f6e;
                // }
            }
        }
        >.bottom{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
        }
    }
    >.bottom{
        margin-top: 35px;
    }
}
</style>

